<!DOCTYPE html>
<html lang="zn">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="__INDEX__/mui/css/mui.min.css">
    <script src="__INDEX__/mui/js/mui.min.js"></script>
    <script src="__INDEX__/mui/js/mui.view.js"></script>
</head>
 
<body>
    <!--页面主结构开始-->
    <div id="app" class="mui-views mui-fullscreen mui-control-content mui-active">
        <div class="mui-view">
            <div class="mui-navbar">
            </div>
            <div class="mui-pages">
            </div>
        </div>
    </div>
    <!--页面主结构结束-->
    <!--单页面开始-->
    <div id="setting" class="mui-page">
        <!--页面标题栏开始-->
        <div class="mui-navbar-inner mui-bar mui-bar-nav">
            <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
                <span class="mui-icon mui-icon-left-nav"></span>
            </button>
            <h1 class="mui-center mui-title">设置</h1>
        </div>
        <!--页面标题栏结束-->
        <!--页面主内容区开始-->
        <div class="mui-page-content">
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <ul class="mui-table-view mui-table-view-chevron">
                        <li class="mui-table-view-cell mui-media">
                            <a class="mui-navigate-right" href="#account">
                                <img class="mui-media-object mui-pull-left head-img" id="head-img" src="">
                                <div class="mui-media-body">
                                    Hello MUI
                                    <p class='mui-ellipsis'>账号:hellomui</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                    <ul class="mui-table-view mui-table-view-chevron">
                        <li class="mui-table-view-cell">
                            <a href="#account" class="mui-navigate-right">账号与安全</a>
                        </li>
                    </ul>
                    <ul class="mui-table-view mui-table-view-chevron">
                        <li class="mui-table-view-cell">
                            <a href="#notifications" class="mui-navigate-right">新消息通知</a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a href="#privacy" class="mui-navigate-right">隐私</a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a href="#general" class="mui-navigate-right">通用</a>
                        </li>
                    </ul>
                    <ul class="mui-table-view mui-table-view-chevron">
                        <li class="mui-table-view-cell">
                            <a href="#about" class="mui-navigate-right">关于MUI <i class="mui-pull-right update">V3.3.0</i></a>
                        </li>
                    </ul>
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell" style="text-align: center;">
                            <a>退出登录</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--页面主内容区结束-->
    </div>
    <!--单页面结束-->
    <div id="account" class="mui-page">
        <div class="mui-navbar-inner mui-bar mui-bar-nav">
            <button type="button" class=" mui-navbar-left mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
                <span class="mui-icon mui-icon-left-nav"></span>设置
            </button>
            <h1 class="mui-center mui-title">账号与安全</h1>
        </div>
        <div class="mui-page-content">
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">
                            <a id="head" class="mui-navigate-right">头像
                                <span class="mui-pull-right head">
                                </span>
                            </a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a>姓名<span class="mui-pull-right">Hbuilder</span></a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a>HBuilder账号<span class="mui-pull-right">hbuilder@dcloud.io</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
 
    <!--单页面结束-->
    <div id="app2" class="mui-views mui-fullscreen mui-control-content ">
        <div class="mui-bar mui-bar-nav">
            <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
                <span class="mui-icon mui-icon-left-nav"></span>设置
            </button>
            <h1 class="mui-center mui-title">app2</h1>
        </div>
        <div class="mui-content">
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">
                            <a id="head" class="mui-navigate-right">头像
                                <span class="mui-pull-right head">
                                </span>
                            </a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a>姓名<span class="mui-pull-right">Hbuilder</span></a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a>HBuilder账号<span class="mui-pull-right">hbuilder@dcloud.io</span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
 
    <div id="footer">
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active" href="#app">
                <span class="mui-icon"><i class="icon iconfont"></i></span>
                <span class="mui-tab-label">锻炼</span>
            </a>
            <a class="mui-tab-item"  href="#app2">
                <span class="mui-icon"><i class="icon iconfont"></i></span>
                <span class="mui-tab-label">学习</span>
            </a>
            <a class="mui-tab-item" href="#app3">
                <span class="mui-icon"><i class="icon iconfont"></i></span>
                <span class="mui-tab-label">成就</span>
            </a>
            <a class="mui-tab-item" href="#app4">
                <span class="mui-icon"><i class="icon iconfont"></i></span>
                <span class="mui-tab-label">设置</span>
            </a>
        </nav>
    </div>
 
</body>
 
</html>
<script>
//初始化单页view
var viewApi = mui('#app').view({
    defaultPage: '#setting'
});
 
mui('.mui-scroll-wrapper').scroll({
    deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
 
var view = viewApi.view;
(function($) {
    //处理view的后退与webview后退
    var oldBack = $.back;
    $.back = function() {
        if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
            viewApi.back();
        } else { //执行webview后退
            oldBack();
        }
    };
    //监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
    //第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
    view.addEventListener('pageBeforeShow', function(e) {
        //                console.log(e.detail.page.id + ' beforeShow');
    });
    view.addEventListener('pageShow', function(e) {
        //                console.log(e.detail.page.id + ' show');
    });
    view.addEventListener('pageBeforeBack', function(e) {
        //                console.log(e.detail.page.id + ' beforeBack');
    });
    view.addEventListener('pageBack', function(e) {
        //                console.log(e.detail.page.id + ' back');
    });
})(mui);
</script>
<style>
    .mui-views,
    .mui-view,
    .mui-pages,
    .mui-page,
    .mui-page-content {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #efeff4;
    }
 
    .mui-pages {
        top: 46px;
        height: auto;
    }
 
    .mui-page.mui-transitioning {
        -webkit-transition: -webkit-transform 300ms ease;
        transition: transform 300ms ease;
    }
 
    .mui-page-left {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
 
    .mui-ios .mui-page-left {
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0);
    }
 
    .mui-navbar {
        position: fixed;
        right: 0;
        left: 0;
        z-index: 10;
        height: 44px;
        background-color: #f7f7f8;
    }
 
    .mui-navbar .mui-bar {
        position: absolute;
        background: transparent;
        text-align: center;
    }
 
    .mui-android .mui-navbar-inner.mui-navbar-left {
        opacity: 0;
    }
 
    .mui-ios .mui-navbar-left .mui-left,
    .mui-ios .mui-navbar-left .mui-center,
    .mui-ios .mui-navbar-left .mui-right {
        opacity: 0;
    }
 
    .mui-navbar .mui-btn-nav {
        -webkit-transition: none;
        transition: none;
        -webkit-transition-duration: .0s;
        transition-duration: .0s;
    }
 
    .mui-navbar .mui-bar .mui-title {
        display: inline-block;
        width: auto;
    }
 
    .mui-page-shadow {
        position: absolute;
        right: 100%;
        top: 0;
        width: 16px;
        height: 100%;
        z-index: -1;
        content: '';
    }
 
    .mui-page-shadow {
        background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
        background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
    }
 
    .mui-navbar-inner.mui-transitioning,
    .mui-navbar-inner .mui-transitioning {
        -webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
        transition: opacity 300ms ease, transform 300ms ease;
    }
 
    .mui-page {
        display: none;
    }
 
    .mui-pages .mui-page {
        display: block;
    }
 
    .mui-page .mui-table-view:first-child {
        margin-top: 15px;
    }
 
    .mui-page .mui-table-view:last-child {
        margin-bottom: 30px;
    }
 
    .mui-table-view {
        margin-top: 20px;
    }
 
    .head-img {
        width: 40px;
        height: 40px;
    }
 
    .mui-fullscreen {
        position: fixed;
        /*z-index: 20;*/
        /*background-color: #000;*/
    }
 
    .mui-ios .mui-navbar .mui-bar .mui-title {
        position: static;
    }
</style>